<!--
1. 动画的钩子函数
    1. 入场的钩子函数
        1. before-enter 动画尚未开始，可以设置起始样式
        2. enter 表示动画开始之后的样式，可以设置完成动画之后的结束状态。
        3. after-enter
        4. enter-cancelled
    2. 出场的钩子函数
        1. before-leave
        2. leave
        3. after-leave
        4. leave-cancelled
    3. 动画钩子函数的第一个参数代表要执行动画的那个dom元素
    4. offsetWidth 触发了重排重绘，所以动画刷新
2. done 其实就是 afterEnter 这个函数，是afterEnter这个函数的引用




-->




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <style>
        .ball{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="toggle">toggle()</button>
        <transition
                @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter"
        >
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>
    <script>
        var vm=new Vue({
           el:"#app",
           data:{
               flag:false
           },
           methods:{
               beforeEnter(el){
                   el.style.transform="translate(0, 0)"
               },
               enter(el,done){
                   el.offsetWidth;
                   el.style.transform="translate(150px,450px)";
                   el.style.transition='all 1s ease';
                   done();
               },
               afterEnter(el){
                   // el.style.display="none";
                   this.toggle();
               },
               toggle(){
                   this.flag=!this.flag;
               }
           }
        });
    </script>
</body>
</html>